<html><head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <meta http-equiv="content-style-type" content="text/css" />
  <meta http-equiv="content-script-type" content="text/javascript" />
  <link rel="exhibit/data" type="application/jsonp" jsonp-callback="famfamfam_flags"
        href="http://ecmanaut.googlecode.com/svn/trunk/sites/facebook.com/famfamfamflags.jsonp" />
  <link rel="stylesheet" href="http://ecmanaut.googlepages.com/sections.css" />
  <title>Flags of the world</title>

  <script>
// load a script url
function js( url ) {
  var script = '<script type="text/javascript" src="'+ url +'"></scr'+'ipt>\n';
  document.write( script );
}

// fetch Exhibit
if( location.protocol != 'file:' )
  js( 'http://static.simile.mit.edu/exhibit/api-2.0/exhibit-api.js?onload=loaded' );
else {
  js( '/Users/jhs/cvs/exhibit/src/ajax/api/simile-ajax-api.js?bundle=false' );
  js( '/Users/jhs/cvs/timeline/src/webapp/api/timeline-api.js?bundle=false' );
  js( '/Users/jhs/cvs/exhibit/src/webapp/api/exhibit-api.js?bundle=false&onload=loaded' );
}
</script>

<style>
@media print {
  #content { background:none; width:100%; margin:0 !important; }
  .printer { display:inline !important; }
  .screen, .exhibit-collectionView-header, .exhibit-viewPanel-viewSelection {
    display:none;
  }
}

.exhibit-collectionView-footer { display:none; }

.printer { display:none; }

#content {
  margin-top:20px;
  clear:left;
}

#data { width:100%; }

.flag {
  background:url(http://ecmanaut.googlecode.com/svn/trunk/sites/facebook.com/famfamfamflags.png);
  height:11px; width:16px; /* mostly -- gets overridden for some few flags */
  float:left;
}

div.region div.flag { margin-top:2px; }

.label {
  font-weight: bold;
  margin-left: 0.3em;
}
</style></head>

<body>
  <div id="banner-pane"><div><a name="head">Flags of the world</a></div></div>

  <div id="content">

    <div id="data"><table style="font-size: 100%" cellspacing="10" width="100%">
      <tr valign="top">
        <td>
          <div id="exhibit-view-panel" ex:role="exhibit-viewPanel">

            <div ex:role="exhibit-view"
              ex:viewClass="TileView"
              ex:orders=".label"
              ex:possibleOrders=".label, .id"
              ex:showAll="true"
              ex:grouped="false">
            </div>

            <div ex:role="exhibit-lens" class="region" style="display:none;">
	      <div ex:id-content=".id">
		<div ex:style-subcontent="background-position:-{{.x}}px 0; width:{{.w}}px; height:{{.h}}px;"
		       class="flag"></div>
		<span ex:content=".label" class="label"></span>
		<span>(ISO 3166: <span ex:content=".id"></span>)</span>
	      </div>
            </div>

            <div ex:role="exhibit-view"
                ex:viewClass="TabularView"
                ex:columns=".id, .label"
                ex:columnLabels="ISO 3166, Name"
                ex:columnFormats="list, list"
                ex:sortColumn="1"
                ex:sortAscending="false">
            </div>

          </div>
        </td>
        <td width="25%" class="screen">
          <!--div id="exhibit-browse-panel" ex:facets="." -->
          <!--div ex:role="exhibit-facet" ex:expression="." ex:facetLabel=""></div-->
        </td>
      </tr>
    </table></div>
  </div>
</body></html>
